/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

<template>
  <grid-row
    ref="gridRowRef"
    :scope="scopeId"
    :class="scopeId"
    :columns="componentAttr.columns"
    :gutterX="componentAttr.gutterX"
    :gutterY="componentAttr.gutterY"
    :gutter="gutter"
    :direction="componentAttr.direction"
    :breakpointValue="breakpointValue"
    :breakpointRefrence="breakpointRefrence"
  >
    <slot></slot>
  </grid-row>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import {
  BreakpointManager,
  GridRowComponent,
} from '@hadss/web_adaptive_layout_ui';
import {
  getBreakpointsAttr,
  Breakpoints,
  getbreakpointManager,
} from '../../utils/getBreakpoint';
import { getScopeId } from '../../utils/getScopeId';

const defaultValue = {
  breakpoints: {
    breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 },
    breakpointRefrence: 'windowSize',
  }
};


type GridRowPropsName = 'columns' | 'gutterX' | 'gutterY' | 'direction';

const props = defineProps({
  columns: [Number, Object],
  gutter: [String, Number, Object],
  breakpoints: Object,
  breakpointRefrence: String,
  direction: String,
  onGridItemClick: {
    type: Function,
    default: () => {},
  },
  onBreakpointChange: {
    type: Function,
    default: (bp) => {},
  },
});

let unsubscribe = null;
let breakpointManager = null;
const breakpoints = props.breakpoints || defaultValue.breakpoints;
const breakpointValue = JSON.stringify(breakpoints.breakpointValue);
const breakpointRefrence = props.breakpointRefrence || breakpoints.breakpointRefrence;
const gutter = props.gutter;
const gutterX = props.gutter['x'] || props.gutter;
const gutterY = props.gutter['y'] || props.gutter;
const scopeId = getScopeId();

const gridRowRef = ref<InstanceType<typeof GridRowComponent>>(null);
const attrNameArr = ['columns', 'gutterX', 'gutterY', 'direction'];
const componentAttr = reactive({
  columns: 12,
  gutterX: 0,
  gutterY: 0,
  direction: '',
});

const getCurrentAttr = () => {
  attrNameArr.forEach((item) => {
    if (props[item as GridRowPropsName] !== undefined) {
        componentAttr[item as GridRowPropsName] = getBreakpointsAttr(
          props[item as GridRowPropsName],
          breakpointManager
        );
    } else {
      componentAttr['gutterX'] = getBreakpointsAttr(gutterX, breakpointManager);
      componentAttr['gutterY'] = getBreakpointsAttr(gutterY, breakpointManager);
    }
  });
};

watch(
  () => props,
  () => {
    getCurrentAttr();
  },
  {
    deep: true,
  }
);

onMounted(() => {
  if (props.onGridItemClick) {
    gridRowRef.value.registerEvents(props.onGridItemClick);
  }
  breakpointManager = getbreakpointManager(
    breakpointRefrence,
    JSON.parse(breakpointValue),
    scopeId
  );
  unsubscribe = breakpointManager.subscribeToBreakpoint((bp) => {
    getCurrentAttr();
    props.onBreakpointChange(bp);
  });
  const mountedCustomEvent = new CustomEvent('gridRowVue3Mounted', {
    detail: {message: true},
    bubbles: false,
    composed: true,
  });
  gridRowRef.value.dispatchEvent(mountedCustomEvent);
});

onUnmounted(() => {
  unsubscribe();
  breakpointManager.destroy();
});
</script>